import React, { forwardRef, useState, useEffect } from 'react'
import './style/Newinfo2.scss'
// import style from './Animalmanagement.module.css'
import * as echarts from "echarts";
const Newinfo2 = forwardRef((props, ref) => {
  const [infodata, setdata] = useState([])
  const getdata = () => {
    // setdata(ref)

  }

  const drawbar = () => {

    var myChart = echarts.init(document.getElementById("Newinfo2_barli"));
    var option = {
      backgroundColor: "#2c343c",
      title: {
        text: "2023年各个天气灾害占比",
        left: "center",
        top: 20,
        textStyle: {
          color: "#ccc",
        },
      },
    
      tooltip: {
        trigger: "item",
        formatter: "{b} : {c} ({d}%)",
      },
    
      visualMap: {
        show: false,
        min: 500,
        max: 600,
        inRange: {
          //colorLightness: [0, 1]
        },
      },
      series: [
        {
          name: "访问来源",
          type: "pie",
          radius: "50%",
          center: ["50%", "50%"],
          color: ["rgb(50,100,255)", "rgb(250,55,126)", "rgb(255,72,79)", "rgb(255,115,33)",'rgb(55,212,92)','rgb(156,32,209)'], //'#FBFE27','rgb(11,228,96)','#FE5050'
          data: [
            {
              value: 285,
              name: "暴雨洪水",
            },
            {
              value: 270,
              name: "台风",
            },
            {
              value: 274,
              name: "龙卷风",
            },
            {
              value: 235,
              name: "雪灾",
            },
             {
              value: 174,
              name: "高温热浪",
            },
            {
              value: 95,
              name: "冰雹",
            },
          ],
    
          label: {
            normal: {
              formatter: ["{c|{c}}", "{b|{b}}"].join("\n"),
              rich: {
                c: {
                  color: "rgb(241,246,104)",
                  fontSize: 20,
                  fontWeight: "bold",
                  lineHeight: 5,
                },
                b: {
                  color: "rgb(98,137,169)",
                  fontSize: 15,
                  height: 40,
                },
              },
            },
          },
          labelLine: {
            normal: {
              lineStyle: {
                color: "rgb(98,137,169)",
              },
              smooth: 0.2,
              length: 30,
              length2: 20,
            },
          },
          itemStyle: {
            normal: {
              shadowColor: "rgba(0, 0, 0, 0.8)",
              shadowBlur: 50,
            },
          },
        },
      ],
    };
    
    
    myChart.setOption(option)

    // console.log(timer);
    window.onresize = () => {
      myChart.resize();
    }

  }
  const drawbar2 = () => {


    var myChart = echarts.init(document.getElementById("Newinfo2_barli2"));
    var option = {

      color: ["#315C94", "#497FB6", "#6F8FCF", "#7AA0BB", "#9FBEDD", "#BCD4E1"],
      backgroundColor: "#211b6a",
      textStyle: {
        color: "#fff",
      },
      title: {
        text: '2011-2016年各个天气灾害占比',
        textStyle: {
          color: "#ccc",
          fontSize: 25
        },
        top: "0%",
        left: 'center',
        // 		right: '5%'
      },
      tooltip: {
        trigger: "axis",
        axisPointer: {
          lineStyle: {
            type: "dashed",
            width: 2,
            color: "#4B941A",
          },
          animation: true,
        },
      },
      legend: {
        show: false,
        data: ["2011", "2012", "2013", "2014", "2015", "2016"],
        left: "right",
      },
      grid: {
        show: false,
      },
      yAxis: {
        data: ["2011", "2012", "2013", "2014", "2015", "2016"],
        splitLine: {
          show: true,
          lineStyle: {
            color: ["#555"],
          },
        },
        axisLine: {
          show: false,
        },
      },
      xAxis: {
        data: ["暴雨洪水", "台风", "龙卷风", "雪灾", "高温热浪", "冰雹"],
        axisLine: {
          show: true,
          lineStyle: {
            color: "#555",
          },
        },
      },
      series: [
        {
          name: "2011年",
          type: "scatter",
          symbol: "circle", //'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'
          symbolSize: function (data) {
            return Math.sqrt(data[2]) * 1;
          },
          label: {
            emphasis: {
              show: true,
              formatter: function (param) {
                return param.data[2];
              },
              position: "top",
            },
          },
          itemStyle: {
            normal: {
              color: "red",
            },
          },
          data: [
            ["暴雨洪水", "2011", 200],
            ["台风", "2011", 1500],
            ["龙卷风", "2011", 2000],
            ["雪灾", "2011", 2500],
            ["高温热浪", "2011", 3000],
            ["冰雹", "2011", 3500],
          ],
        },
        {
          name: "2012年",
          type: "scatter",
          symbol: "circle", //'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'
          symbolSize: function (data) {
            return Math.sqrt(data[2]) * 1;
          },
          label: {
            emphasis: {
              show: true,
              formatter: function (param) {
                return param.data[2];
              },
              position: "top",
            },
          },
          itemStyle: {
            normal: {
              color: "#C94C15",
            },
          },
          data: [
            ["暴雨洪水", "2012", 2200],
            ["台风", "2012", 500],
            ["龙卷风", "2012", 2000],
            ["雪灾", "2012", 500],
            ["高温热浪", "2012", 300],
            ["冰雹", "2012", 350],
          ],
        },
        {
          name: "2013年",
          type: "scatter",
          symbol: "circle", //'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'
          symbolSize: function (data) {
            return Math.sqrt(data[2]) * 1;
          },
          label: {
            emphasis: {
              show: true,
              formatter: function (param) {
                return param.data[2];
              },
              position: "top",
            },
          },
          itemStyle: {
            normal: {
              color: "#A18F1D",
            },
          },
          data: [
            ["暴雨洪水", "2013", 2000],
            ["台风", "2013", 2500],
            ["龙卷风", "2013", 200],
            ["雪灾", "2013", 250],
            ["高温热浪", "2013", 300],
            ["冰雹", "2013", 300],
          ],
        },
        {
          name: "2014年",
          type: "scatter",
          symbol: "circle", //'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'
          symbolSize: function (data) {
            return Math.sqrt(data[2]) * 1;
          },
          label: {
            emphasis: {
              show: true,
              formatter: function (param) {
                return param.data[2];
              },
              position: "top",
            },
          },
          itemStyle: {
            normal: {
              color: "#17885C",
            },
          },
          data: [
            ["暴雨洪水", "2014", 2000],
            ["台风", "2014", 2500],
            ["龙卷风", "2014", 1200],
            ["雪灾", "2014", 1250],
            ["高温热浪", "2014", 1300],
            ["冰雹", "2014", 1300],
          ],
        },
        {
          name: "2015年",
          type: "scatter",
          symbol: "circle", //'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'
          symbolSize: function (data) {
            return Math.sqrt(data[2]) * 1;
          },
          label: {
            emphasis: {
              show: true,
              formatter: function (param) {
                return param.data[2];
              },
              position: "top",
            },
          },
          itemStyle: {
            normal: {
              color: "#2769CF",
            },
          },
          data: [
            ["暴雨洪水", "2015", 2000],
            ["台风", "2015", 2500],
            ["龙卷风", "2015", 1200],
            ["雪灾", "2015", 1250],
            ["高温热浪", "2015", 1300],
            ["冰雹", "2015", 1300],
          ],
        },
        {
          name: "2016年",
          type: "scatter",
          symbol: "circle", //'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'
          symbolSize: function (data) {
            return Math.sqrt(data[2]) * 1;
          },
          // label: {
          //   emphasis: {
          //     show: true,
          //     formatter: function (param) {
          //       return param.data[2];
          //     },
          //     position: "top",
          //   },
          // },
          itemStyle: {
            normal: {
              color: "#509820",
            },
          },
          data: [
            ["暴雨洪水", "2016", 2000],
            ["台风", "2016", 500],
            ["龙卷风", "2016", 2000],
            ["雪灾", "2016", 2050],
            ["高温热浪", "2016", 3000],
            ["冰雹", "2016", 3000],
          ],
        },
      ],

    };
    myChart.setOption(option)

    // console.log(timer);
    window.onresize = () => {
      myChart.resize();
    }

  }

  useEffect(() => {
    drawbar()
    drawbar2()
    console.log(infodata);
    getdata()

  }, [])
  // console.log(ref);
  return (
    <div className='Newinfo2_showli'>
      {/* {drawlist()} */}
      <div id='Newinfo2_barli'></div>
      <div id='Newinfo2_barli2'></div>
    </div>
  )
})

export default Newinfo2